<template>
  <div class="category">
    <!-- 头部搜索框 -->
    <form>
      <div class="header">
        <div>
          <van-search shape="round" placeholder="搜索商品信息" />
        </div>
      </div>
    </form>
    <van-sidebar
      v-model="activeKey"
      :index-list="indexTitleList"
      style="float: left"
    >
      <van-sidebar-item
        v-for="(o, index) in indexTitleList"
        :title="o"
        :key="index"
      />
    </van-sidebar>
    <div class="box1">
      <div class="box2" v-for="(c, index) in indexList" :key="index">
        <div class="bar">
          <div class="line"></div>
          <div class="name">{{ c.cate_name }}</div>
          <div class="line"></div>
        </div>
        <div class="child">
          <div class="item" v-for="o in c.children" :key="o.id">
            <van-image :src="o.pic" />
            <div>{{ o.cate_name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// @ is an alias to /src
export default {
  name: "Category",
  data() {
    return {
      indexList: [], //分类列表
      indexTitleList: [], //各一级分类名称
      activeKey: 0,
    };
  },
  created() {
    //获取商品分类列表的信息
    this.axios.get("/api/category").then((d) => {
      this.indexList = d.data.data;
      this.indexTitleList = this.indexList.map((dd) => {
        return dd.cate_name; //一级分类名称
      });
      console.log(d.data.data);
    });
  },
  components: {},
  methods: {},
};
</script>
<style lang="less">
.category {
  .header {
    width: 100vw;
    position: fixed;
    z-index: 10;
    top: 0;
    border-bottom: 1px solid #f5f5f5;
    .van-search {
      height: 0.96rem;
    }
  }
  .van-sidebar {
    position: fixed;
    top: 0.96rem;
    z-index: 3;
    width: 2.4rem;
    height: 100vh;
    background-color: #f7f8fa;
    .van-sidebar-item--select {
      color: #ee0a24;
    }
    .van-sidebar-item--select::before {
      height: 100%;
    }
    .van-sidebar-item__text {
      font-size: 0.35rem;
    }
  }
  .box1 {
    margin-top: 0.96rem;
    padding-bottom: 50px;
    .box2 {
      padding-left: 2.4rem;
      .bar {
        .name {
          font-size: 0.34rem;
          color: #333;
          font-weight: 700;
          text-align: center;
        }
        .line {
          width: 1rem;
          height: 0.02rem;
          background-color: #999;
        }
      }
      .child {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .item {
          width: 33.3%;
          margin-top: 0.26rem;
          text-align: center;
          .van-image {
            width: 100%;
            height: auto;
          }
          div {
            font-size: 0.24rem;
            color: #333;
            height: 0.56rem;
            width: 100%;
            line-height: 0.56rem;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>

